<template>
    <div class="wrapper">
        <mt-header :fixed="false" title="充值" rightName="记录" rightPath="/account/wallet/record" :rightPathQuery="rightPathQuery" mtClass="no-bg" />
        <div class="content">
            <div class="codeBox"><div id="qrcode"></div></div>
            <div class="title">{{ethAddress}}</div>
        </div>
        <div class="default-btn tag-read" @click="copyEvent">
            <button class="mint-button mint-button--primary mint-button--large">
                <label class="mint-button-text">复制地址</label>
            </button>
        </div>
        <div class="tips">
            <p>重要：</p>
            <p>禁止向该以太坊地址充值RB以外的资产，任何充入该地址的非RB资产将不可找回。</p>
        </div>
    </div>
</template>

<script>
import mtHeader from "@/components/Header"
import QRCode from 'qrcodejs2'
import Clipboard from 'clipboard';
import { Toast } from 'mint-ui';
import { mapActions } from 'vuex'
export default {
  data() {
    return {
        ethAddress: '',
        rightPathQuery:{
            type : '2'
        }
    }
  },
  components:{
    mtHeader
  },
  mounted(){
    this.init()
  },
  methods: {
    ...mapActions('user', [
        'get_userInfo_cache',
        'get_userInfo_data'
    ]),
    init(){
        // 用户信息的缓存？缓存 : 发送请求
        this.get_userInfo_cache()
        .then(res => {
            if (res) {
                this.ethAddress = res.ethAddress
                this.qrcode()
            } else {
                this.get_userInfo_data().then(res => {
                    this.ethAddress = res.ethAddress
                    this.qrcode()
                })
            }
        })
    },
    qrcode() {
        let qrcode = new QRCode('qrcode',{
            width: 200, // 设置宽度，单位像素
            height: 200, // 设置高度，单位像素
            text: this.ethAddress   // 设置二维码内容
        })
    },
    copyEvent(){
        var text = this.ethAddress
        var clipboard = new Clipboard('.tag-read', {
            text: function() {
                return text;
            }
        });
        clipboard.on('success', e => {
            console.log('复制文本为：'+text);
            Toast({
                message: '复制成功',
                iconClass: 'icon iconfont icon-ic_check'
            });
            // 释放内存
            clipboard.destroy()
        })
        clipboard.on('error', e => {
            // 不支持复制
            Toast({
                message: '不支持自动复制',
                iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
            });
            // 释放内存
            clipboard.destroy()
        })
    },
    toRecord(){
        this.$router.push({
            name : 'record',
            query:{ 
                type : '2'
            }
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .content{
        .codeBox{
            width:220px;
            height:220px;
            margin:40px auto 30px;
            box-shadow:0px 0px 14px 4px rgba(83,135,253,0.2);
            position:relative;
            #qrcode{
                width: 200px;
                height: 200px;
                position:absolute;
                top:50%;
                left:50%;
                margin-left:-100px;
                margin-top:-100px;
            }
        }
        .title{
            font-size:12px;
            color:#666;
            text-align:center;
        }
    }
    .tips{
        color:#BFBFBF;
        line-height:20px;
        font-size:13px;
    }
}
</style>
